﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>R2</title>
    <script src="libs/jquery.min.js" type="text/javascript"></script>
    <script src="libs/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script src="libs/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="libs/json2.js" type="text/javascript"></script>
    <script src="libs/rangy/rangy-core.js" type="text/javascript"></script>
    <script src="libs/jsex.js" type="text/javascript"></script>
    <link href="libs/normalize.css" type="text/css" rel="stylesheet" />
    <link href="libs/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css" rel="stylesheet" />
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/R2.js" type="text/javascript"></script>
    <link href="css/common.css" type="text/css" rel="stylesheet" />
    <link href="css/R2.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <table><tr>
    <td style='padding: 5px; padding-bottom: 10px;' valign='top'>
        <div class='shadow round-corner bgwhite'>
            <table class='cell-p5' style='table-layout: fixed;'>
                <thead><tr><td colspan='2'>
                    <span data-bind='text:codefile'></span>
                    <span class='toolbar'>
                        <img src='images/add.png' alt='Ghi comment' data-bind='click:addComment' />
                    </span>
                </td></tr></thead>
                <tbody class='content'>
                    <tr>
                        <td class='linenums'>
                            <div id='linenums' data-bind='dock: {stretchDown: true, offset: 40}' style='overflow:hidden'>
                                <pre data-bind='text:linenums'></pre>
                            </div>
                            
                        </td>
                        <td class='code'>
                            <div id='code' style='position: relative; overflow: auto; display: block' data-bind='dock: {stretchRight: true, stretchDown: true, hoffset: 220, voffset: 40}'>
                                <pre data-bind='code:code'></pre>
                                <!-- ko foreach: comments -->
                                <div class='round-corner comment bgwhite' data-bind='css: {selected: isSelected() }, click: select'>
                                    <table class='cell-p5 w100'>
                                        <tbody>
                                            <!-- ko if:$parent.mode()==Constants.Mode.VIEW -->
                                            <tr data-bind='if:problem'><td class='problem' data-bind='html:problem' /></tr>
                                            <tr data-bind='if:response'><td class='response' data-bind='html:response' /></tr>
                                            <!-- /ko -->
                                            <!-- ko if:$parent.mode()==Constants.Mode.REVIEW -->
                                            <tr><td class='problem' data-bind='contenteditable:problem' /></tr>
                                            <tr data-bind='if:response'><td class='response' data-bind='contenteditable:response' /></tr>
                                            <!-- /ko -->
                                            <!-- ko if:$parent.mode()==Constants.Mode.UPDATE -->
                                            <tr><td class='problem' data-bind='contenteditable:problem' /></tr>
                                            <tr><td class='response' data-bind='contenteditable:response' /></tr>
                                            <!-- /ko -->
                                        </tbody>
                                    </table>
                                    <comment data-bind='css: {selected: isSelected() }, click: select'></comment>
                                    <span data-bind='comment: $data'></span>
                                </div>
                                <!-- /ko -->
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot><tr><td colspan='2'>Số dòng: <span data-bind='text:linecount'></span>, số comment: <span data-bind='text:comments().length'></span></td></tr></tfoot>
            </table>
        </div>
    </td>
    <td width='2px'></td>
    <td style='padding: 5px; width: 200px;' valign='top'>
        <div class='shadow round-corner bgwhite'>
            <table class='cell-p5 w100'>
                <thead><tr><td colspan='2'>Review
                    <span style='float: right'>
                        <img style='cursor:pointer' src='images/open.png' data-bind='click:open' alt='Mở file' />
                        <img style='cursor:pointer' src='images/save.png' data-bind='click:save' alt='Lưu' />
                    </span>
                </td></tr></thead>
                <tbody class='content'>
                    <tr><td>File</td><td data-bind='text:codefile'></td></tr>
                    <tr><td>Người tạo</td><td data-bind='text:creator'</tr>
                    <tr><td>Người review</td><td data-bind='text:reviewer'</tr>
                    <tr><td>Ngày review</td><td data-bind='text:reviewDate'</tr>
                </tbody>
                <tfoot>
                    <tr><td colspan='2'></td></tr>
                </tfoot>
            </table>
        </div>
        <br />
        <div class='shadow round-corner bgwhite'>
            <table class='cell-p5 w100'>
                <thead><tr><td colspan='2'>Comment</td></tr></thead>
                <tbody class='content vscroll' data-bind='foreach:comments, dock: { stretchDown: true, absolute: false, offset: 41 }'>
                    <tr><td data-bind='text:location' /><td data-bind='html:problem' /></tr>
                </tbody>
                <tfoot><tr><td colspan='2'>Tổng số: <span data-bind='text:comments().length'></span></td></tr></tfoot>
            </table>
        </div>
    </td></tr></table>
</body>
</html>